<template>
  <div class="app-container">
    <div v-if="user">
      <el-row :gutter="20">
        <el-col :span="6" :xs="24">
          <UserCard :user="user" />
        </el-col>

        <el-col :span="18" :xs="24">
          <el-card>
            <el-tabs v-model="activeTab">
              <el-tab-pane :label="$t('AbpAccount.ChangePassword')" name="ChangePassword">
                <ChangePassword :user="user" />
              </el-tab-pane>
              <el-tab-pane
                :label="$t('AbpAccount[\'PersonalInfo\']')"
                name="PersonalSettings"
              >
                <PersonalSetting  :user="user" />
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup lang="ts">
import ChangePassword from "./components/ChangePassword.vue";
import PersonalSetting from "./components/PersonalSettings.vue"
import UserCard from "./components/UserCard.vue";
import { useUserStore } from "@/store/modules/user";
const activeTab = ref("ChangePassword");
const user = ref<any>({
  extraProperties:{
    introduction:''
  }
 
});
const userStore = useUserStore();
function getUser() {
  user.value.name = userStore.name;
  user.value.role = userStore.roles.join(" | ");
  user.value.email = userStore.email;
  user.value.userName = userStore.userName;
  user.value.phoneNumber = userStore.phoneNumber;
  user.value.extraProperties={};
  user.value.extraProperties.Avatar = userStore.avatar;
  user.value.extraProperties.Introduction = userStore.introduction;

}

onMounted(() => {
  //console.log("mounted");
  getUser();
});
</script>
